<template>
  <view class="service-container">
    <view class="service-header">
      <image class="service-icon" src="http://101.200.154.121:19000/teacher-manage-static/static/service-icon.png" mode="aspectFit"></image>
      <text class="service-title">在线客服</text>
    </view>

    <view class="contact-info">
      <view class="contact-item">
        <text class="label">客服电话</text>
        <text class="value" @tap="makePhoneCall">400-123-4567</text>
      </view>
      <view class="contact-item">
        <text class="label">工作时间</text>
        <text class="value">周一至周日 9:00-21:00</text>
      </view>
    </view>

    <view class="service-options">
      <button class="service-btn" @tap="contactOnline">
        <image class="btn-icon" src="/static/online-service.png" mode="aspectFit"></image>
        <text>在线咨询</text>
      </button>
      <button class="service-btn" @tap="showFeedback">
        <image class="btn-icon" src="/static/feedback.png" mode="aspectFit"></image>
        <text>问题反馈</text>
      </button>
    </view>

    <view class="faq-section">
      <text class="section-title">常见问题</text>
      <view class="faq-list">
        <view class="faq-item" v-for="(item, index) in faqList" :key="index" @tap="showFaqDetail(item)">
          <text class="faq-question">{{ item.question }}</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      faqList: [
        { question: '如何预约课程？', answer: '您可以在首页选择心仪的课程，点击报名即可预约。' },
        { question: '如何查看课程进度？', answer: '在"我的-我的课程"中可以查看课程进度。' },
        { question: '如何申请退款？', answer: '请联系在线客服或拨打客服电话进行咨询。' },
        { question: '上课时遇到问题怎么办？', answer: '可以直接联系授课老师或客服处理。' }
      ]
    }
  },
  methods: {
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: '4001234567'
      })
    },
    contactOnline() {
      // 跳转到AI客服聊天页面
      uni.navigateTo({
        url: '/pages/chat/index'
      })
    },
    showFeedback() {
      uni.navigateTo({
        url: '/pages/feedback/index'
      })
    },
    showFaqDetail(item) {
      uni.showModal({
        title: item.question,
        content: item.answer,
        showCancel: false
      })
    }
  }
}
</script>

<style>
.service-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 30rpx;
}

.service-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.service-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.service-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.contact-info {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #4080FF;
}

.service-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.service-btn {
  flex: 1;
  margin: 0 10rpx;
  height: 160rpx;
  background-color: #fff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.service-btn text {
  font-size: 28rpx;
  color: #333;
}

.faq-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: block;
}

.faq-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  font-size: 28rpx;
  color: #333;
}

.arrow {
  font-size: 28rpx;
  color: #999;
}
</style> 